<template>
  <div class="curriculumDetail-container">
    <div class="curriculumDetail-banner">
      <img :src="baseUrl+course_detail.thumb" alt="">
      <div ref="audioBox"></div>
    </div>
    <div class="tab-group">
      <van-tabs v-model="active">
        <van-tab title="课程介绍"></van-tab>
        <van-tab title="课程列表"></van-tab>
    
        
      </van-tabs>
    </div>
    <div v-show="active == 0">
      <div class="curriculum-name-group">
        <div class="curriculum-name">{{course_detail.name}}</div>
        <div class="curriculum-des">
          <span>{{course_detail.mtitle}}</span>
          <div class="curriculum-type">
            <van-icon name="medal" />
            <span>复训</span>
          </div>
        </div>

      </div>
      <div class="curriculum-time">
        <div class="curriculum-time-group">
          <div class="curriculum-time-item">
            <van-icon name="underway-o" size="0.28rem"/>
            <div class="curriculum-time-title">报名时间</div>
            <div class="curriculum-time-info">{{course_detail.start | dateFormats}}-</div>
            <div class="curriculum-time-info">{{course_detail.end | dateFormats}}</div>
          </div>
        </div>
        <div class="curriculum-time-group">
          <div class="curriculum-time-item">
            <van-icon name="edit" size="0.28rem" />
            <div class="curriculum-time-title">开课时间</div>
            <div class="curriculum-time-info" v-if="time_table.length>0">{{time_table[0].date | dateFormats}}</div>
          </div>
        </div>
      </div>
      <div class="curriculum-info">
        <div class="curriculum-details" style="padding-top:1rem;">
          <div class="curriculum-info-title">讲师介绍</div>
          <div class="teacher-group">
            <div class="teacher-img">
              <img :src="baseUrl+course_teacher.thumb" alt="">
              <!-- <div class="teacher-name">{{course_teacher.tname}}</div> -->
            </div>
            <div class="teacher-js">
              <span>{{course_teacher.jinyan}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="curriculum-info" v-if="course_detail.dagang">
        <div class="curriculum-details">
          <div class="curriculum-info-title">课程大纲</div>
          <div class="curriculum-js" v-html="course_detail.dagang"></div>
        </div>
      </div>
    </div>
    <div class="curriculum-list" v-show="active == 1">
      <van-cell-group>
        <van-cell is-link v-for="(item, index) in time_table" :key="index" @click="curriculumIsPlay(item)">
          <template #title>
            <van-tag type="success">第{{item.nub}}讲</van-tag>
            <!-- isPlay == 0 &&  -->
            <span class="custom-isok_play" v-if="item.is_free == 1 && item.free_tiem*1000>nowTimes">限免</span>
            <span class="custom-title">{{item.name}}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <footers/>
    <div style="height:1.6rem"></div>
    <!-- <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" @click="onClickIcon(1)" />
      <van-goods-action-icon icon="user-circle-o" text="咨询" @click="onClickIcon(2)" />
      <van-goods-action-icon icon="after-sale" :text="course_detail.rebuymoney || '0.00'" />
      <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
    </van-goods-action> -->
    <div class="footer-buy">
      <div class="footer-buy-left"> 
        <div class="footer-buy-left-item" @click="onClickIcon(1)">
          <div class="buy-left-item-icon iconfont icon-fanhui1"></div>
          <div class="buy-left-item-text">回首页</div>
        </div>
        <div class="footer-buy-left-item" @click="onClickIcon(2)">
          <div class="buy-left-item-icon iconfont icon-designer-code-noprev" style="font-size: 0.24rem;"></div>
          <div class="buy-left-item-text">我的咨询</div>
        </div>
        <div class="footer-buy-left-item1">￥{{course_detail.cose || '0.00'}}</div>
      </div>
      <div class="footer-buy-right" @click="onClickButton" v-if="isPlay == 0">立即购买</div>
      <div class="footer-buy-right" v-if="isPlay == 1">已购买</div>
    </div>
    <wechat :callback="wxReadyOkMethod" :share-data="wxShareData" pageurl="/weChatApp/curriculumDetail"/>
    <van-popup v-model="show" round position="bottom" :style="{ height: '46%' }" closeable>
      <div style="padding:0.8rem 0.2rem 0 0.2rem">
        <van-form @submit="onSubmit" ref="form">
          <van-field v-model="form.realname" name="姓名" label="姓名" placeholder="姓名" :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="form.mobile" name="手机号码" label="手机号码" placeholder="手机号码" :rules="[{ validator: asyncValidator, message: '电话号码格式错误' }]" />
          <van-field v-model="form.descp" name="所属地区" label="所属地区" placeholder="所属地区" :rules="[{ required: true, message: '所属地区' }]" />
          <van-field v-model="form.adviser" name="顾问姓名" label="顾问姓名" placeholder="顾问姓名" :rules="[{ required: true, message: '顾问姓名' }]" />
          <van-field v-model="form.adviser_mobile" name="顾问手机号码" label="顾问手机号码" placeholder="顾问手机号码" :rules="[{ required: true, message: '顾问手机号码' }]" />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button> 
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>
<script>
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
import {
  Tabs,
  Tab,
  Icon,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  CellGroup,
  Cell,
  Tag,
  Popup,
  Form,
  Field,
  Button,
} from "vant";
import { mapState } from "vuex";
import utils from "@/utils/utils";
export default {
  name: "match",
  components: {
    [Icon.name]: Icon,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Popup.name]: Popup,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      active: 0,
      course_detail: {},
      course_teacher: {},
      time_table: [],
      baseUrl: this.$API.ASSET_IMAGES_URL,
      wxReadyOk: false,
      show: false,
      form: {
        mobile: "",
        realname: "",
        descp:""
      },
      isPlay:0,
      nowTimes:new Date().getTime(),
      wxShareData:null,
      wxReadys: false,
      messageShare: false,

    };
  },
  computed: {
    ...mapState({
      ZRSUserInfo: (state) => state.app.ZRSUserInfo,
    }),
  },
  mounted() {
    this.id = this.$route.query.id;
    this.initAjaxMethod();
  },
  filters: {
    dateFormats: function (val) {
      return utils.dateFormat(val, "cn");
    },
  },
  methods: {
    initAjaxMethod() {
      let that=this;
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_CURRICULUM_DETAIL, { id: this.id })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.course_detail = res.course_detail || {};
            this.course_teacher = res.course_teacher || {};
            this.time_table = Array.isArray(res.time_table)
              ? res.time_table
              : [];
              this.isPlay=res.is_play || 0;
              this.wxShareData={
                title: res.course_detail.name, // 分享标题
                desc: res.course_detail.mtitle, // 分享描述
                imgUrl: this.baseUrl+res.course_detail.thumb, // 分享图标
              }
              
          } else {
            this.$notify({ type: "warning", message: res.msg });
          }
        });
    },
    asyncValidator(val) {
      return /^1\d{10}$/.test(val);
    },
    onClickIcon(flag) {
      if (flag == 1) {
        this.$router.push("/");
      } else if (flag == 2) {
      }
    },
    wxReadyOkMethod() {
      console.log("js准备好了");
      this.wxReadyOk = true;
    },
    onClickButton(){
      this.form = {
          mobile: this.ZRSUserInfo.mobile,
          realname: this.ZRSUserInfo.realname,
          descp: this.ZRSUserInfo.descp,
          adviser: this.ZRSUserInfo.adviser,
          adviser_mobile: this.ZRSUserInfo.adviser_mobile,
        };
        this.show = true;
        this.$nextTick(() => {
          this.$refs["form"].resetValidation();
        });
    },
    onSubmit() {
      const toast = this.$toast.loading("加载中...");
      this.$http.post(this.$API.SET_USERINFO_MOBILE, this.form).then((res) => {
        toast.clear();
        if (res.code == 1) {
          this.$store.dispatch(
            "app/setZrsUserInfo",
            Object.assign({}, this.ZRSUserInfo, this.form)
          );
          this.show = false;
          this.wxPlayMethod();
        } else {
          this.$notify({ type: "warning", message: res.msg });
        }
      });
    },
    wxPlayMethod() {
      if (!this.wxReadyOk && !this.$API.IS_DEVELOPMENT) {
        return this.$toast.fail("调起微信支付失败!");
      }
      let that = this;
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.WX_NEWPAY, {
          tcourse_id: this.id,
          dev: this.$API.IS_DEVELOPMENT ? 1 : 0,
          adviser:this.form.adviser,
          adviser_mobile:this.form.adviser_mobile
        }, {}, false)
        .then((result) => {
          console.log("详情", result);
          toast.clear();
          if (result.code == 1) {
            this.$WX.chooseWXPay({
              timestamp: result.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: result.data.nonceStr, // 支付签名随机串，不长于 32 位
              package: result.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: result.data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
              paySign: result.data.paySign, // 支付签名
              success: function (res) {
                if (res.errMsg == "chooseWXPay:ok") {
                  that.$toast.success("支付成功");
                  setTimeout(() => {
                    that.$router.push("/buyCurriculum");
                  }, 1500);
                } else {
                  that.$toast.fail(res.errMsg);
                }
              },
              cancel: function (res) {
                that.$toast.fail("取消支付");
              },
            });
          } else if (result.code == 2) {
            this.$dialog.alert({
              title: "支付提示",
              message: "您的订单已支付,无需重复支付!",
            });
          } else if (result.code == 3) {
            this.$toast.success("支付成功");
            setTimeout(() => {
              that.$router.push("/buyCurriculum");
            }, 1500);
          } else {
            this.$toast.fail(result.msg);
          }
        })
        .catch((err) => {
          console.log("result.msg", err);
          toast.clear();
        });
    },
    curriculumIsPlay(data) {
      
      if(data.lnubtype=="needpay"){
        // 围绕之前后台后端判断是否购买
        this.$toast.fail("请先购买课程");return false;
      }else{
        if(data.lnubtype=="lizhi"){
          window.location.href=data.lnub;
        }else{
          this.$router.push({path:'/couPlayback',query:{course_id:data.kcid,kb_id:data.id,isPlay:0}})
        }
         
      }
      return false;
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_CURRICULUM_DETECTION, {
          course_id: data.kcid,
          kb_id: data.id,
        })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            if(res.link_url){
                window.location.href=res.link_url;
                return;
            }
            this.$router.push({
              path: "/couPlayback",
              query: { course_id: res.course_id, kb_id: res.kb_id },
            });
          } else {
            this.$toast.fail("请先购买课程");
          }
        });
    },
  },
};
</script>
<style lang="less">
.curriculumDetail-container {
  .curriculumDetail-banner {
    font-size: 0;
    img {
      width: 100%;
      height: auto;
    }
  }
  .tab-group {
    .van-tab {
      padding: 0 0.08rem;
      font-size: 0.3rem;
      line-height: 0.36rem;
    }
  }
  .van-goods-action {
    height: 1.2rem;
    border-top: 1px solid #eee;
    .van-goods-action-icon {
      font-size: 0.24rem;
      min-width: 1.2rem;
    }
    .van-goods-action-icon__icon {
      font-size: 0.4rem;
    }
    .van-goods-action-button {
      height: 0.8rem;
      .van-button__text {
        font-size: 0.3rem;
      }
    }
  }
  .curriculum-name-group {
    padding: 0.2rem 0.3rem;
    background: #fff;
    border-bottom:1px solid #eee;
    .curriculum-name {
      font-size: 0.32rem;
      color: #666;
    }
    .curriculum-des {
      font-size: 0.28rem;
      color: #ec725d;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top:0.08rem;
    }
    .curriculum-type {
      font-size: 0.28rem;
      color: #333;
      display: flex;
      align-items: center;
    }
  }
  .curriculum-time {
    // display: flex;
    background: #fff;
    padding: 0 0.15rem;
    .curriculum-time-group {
      padding: 0.15rem 0.15rem;
      border-bottom:1px solid #eee;
    }
    .curriculum-time-item {
      // padding: 0.2rem;
      background: #fff;
      // border-radius: 6px;
      // box-shadow: 1px 1px 4px -3px rgba(0, 0, 0, 0.3);
      // min-height: 1.7rem;
      display: flex;
      align-items: center;
    }
    .curriculum-time-title {
      text-align: center;
      font-size: 0.28rem;
      padding:0 4px;
      white-space: nowrap;
    }
    .curriculum-time-info {
      line-height: 0.4rem;
      font-size: 0.28rem;
      white-space: nowrap;
      text-align: center;
    }
  }
  .curriculum-list {
    .van-cell {
      padding: 0.2rem 0.32rem;
      font-size: 0.28rem;
      line-height: 0.48rem;
      display: flex;
      align-items: center;
    }
    .van-cell__title {
      display: flex;
      align-items: center;
      .van-tag {
        padding: 0 0.08rem;
        font-size: 0.24rem;
        height: 0.4rem;
        white-space: nowrap;
        margin-right:0.1rem;
        &::after{
          content:'';
          border-style: solid;
          border-width: 6px;
          border-color:transparent  transparent transparent #1DC134;
          position: absolute;
          top:50%;
          right:0;
          transform: translate(98%,-50%);
          z-index: 1;
        }
      }
      .custom-title {
        padding-left: 0.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.28rem;
        line-height: 0.32rem;
        color: #323233;
        white-space: nowrap;
        max-width: 5rem;
      }
    }
    .custom-isok_play{
      font-size: 0.24rem;
      color:#1DC134;
      margin-left:0.1rem;
      // font-weight: bold;
      white-space: nowrap;
    }
  }
  .curriculum-info {
    padding: 0.2rem 0.3rem;
    background: #fff;
    .curriculum-details {
      // box-shadow: 0px 2px 8px 3px rgba(235, 235, 235, 0.4);
      // padding: 0.5rem 0.1rem 0.2rem 0.1rem;
      // border-radius: 6px;
      // background: #fff;
      position: relative;
    }
    .curriculum-info-title {
      height: 0.5rem;
      // background: url("../../assets/img/shuoming.png") center no-repeat;
      // background-size: auto 0.5rem;
      line-height: 0.5rem;
      font-size: 0.32rem;
      color: #333;
      padding-left:0.3rem;
      font-weight: 600;
      // text-align: center;
      // position: absolute;
      // top: -0.12rem;
      // left: 0;
      // width: 100%;
      position: relative;
      &:after{
        content:'';
        position: absolute;
        top:50%;
        left:0;
        height: 0.34rem;
        width: 2px;
        background: #000;
        transform: translateY(-50%);
      }
    }
    .curriculum-js {
      font-size: 0.3rem;
      color: #323233;
      line-height: 0.4rem;
      p{
        margin:0;
      }
    }
    .teacher-group {
      // padding-left: 1.8rem;
      // position: relative;
      .teacher-img {
        width: 1.6rem;
        position: absolute;
        display: flex;
        justify-content: center;
        flex-direction: column;
        right: 0.1rem;
        top: 0.2rem;
        align-items: center;
        img {
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 50%;
          object-fit: cover;
        }
        .teacher-name {
          font-size: 0.28rem;
          color: #323233;
        }
      }
      .teacher-js {
        font-size: 0.3rem;
        color: #333;
        line-height: 0.42rem;
        text-indent: 0.6rem;
      }
    }
  }
  .footer-buy{
    position: fixed;
    z-index: 100;
    background: #F7F7F7;
    border-top: 1px solid #bbb;
    display: flex;
    align-items: center;
    bottom:0;
    width: 100%;
    .footer-buy-left{
      width: 60%;
      display: flex;
      align-items: center;
    } 
    .footer-buy-left-item{
      width: 33.33%;
      border-left:1px solid #bbb;
      height: 1rem;
    } 
    .buy-left-item-icon{
      font-size: 0.4rem;
      line-height: 0.4rem;
      text-align: center;
      color: #666;
    }
    .buy-left-item-text{
      font-size: 0.3rem;
      color: #666;
      text-align: center;
    } 
    .footer-buy-left-item1{
      width: 33.33%;
      text-align: center;
      font-size: 0.3rem;
      color:#EC725D;
      border-left:1px solid #bbb;
      height: 1rem;
      line-height: 1rem;
    } 
    .footer-buy-right{
      width: 40%;
      background: #EC725D;
      color: white;
      line-height: 1rem;
      height: 1rem;
      font-size: 0.3rem;
      text-align: center;
    }
  }
}
</style>